<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			技师审核
		</view>
		<view class="" v-if="!loading" >
			<view class="base-box">
				<view class="base">
					<u-table class="u-table-basic"  align="left">
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								基础信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								姓名
							</u-td>
							<u-td class="u-table-td "  >
								{{data.name}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr " >
							<u-td class="u-table-td u-table-tr bold" width="104px" >
								手机号码
							</u-td>
							<u-td class="u-table-td"  >
								{{data.mobile}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户性别
							</u-td>
							<u-td class="u-table-td"  >
								{{data.sex}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户生日
							</u-td>
							<u-td class="u-table-td"  >
								{{initBirthdy(data.birthday)}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								自我介绍
							</u-td>
							<u-td class="u-table-td"  >
								{{data.intro}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								证件号码
							</u-td>
							<u-td class="u-table-td"  >
								{{initIdCard(data.id_card.card_id) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								证件住址
							</u-td>
							<u-td class="u-table-td"  >
								{{ data.id_card.address }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								证件民族
							</u-td>
							<u-td class="u-table-td"  >
								{{ data.id_card.nation }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								证件失效日期
							</u-td>
							<u-td class="u-table-td "  >
								{{initBirthdy( data.id_card.expiring_date )}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								证件签发机关
							</u-td>
							<u-td class="u-table-td"  >
								{{  data.id_card.organ }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								服务类型标题
							</u-td>
							<u-td class="u-table-td"  >
								<view>
									<u-tag v-for="item in data.classify" :text="item.title" mode="plain" style="margin-right: 5px;" /> 
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户所在位置
							</u-td>
							<u-td class="u-table-td"  >
								{{(data.location.title) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户余额
							</u-td>
							<u-td class="u-table-td"  >
								{{(data.money) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户坐标
							</u-td>
							<u-td class="u-table-td"  >
								{{ data.coordinate }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								已接单数量
							</u-td>
							<u-td class="u-table-td"  >
								{{(data.orders || 0) }}单
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								推荐人数量
							</u-td>
							<u-td class="u-table-td"  >
								{{(data.sell) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								最新评价
							</u-td>
							<u-td class="u-table-td"  >
								{{ (data.comment?data.comment.text :'暂无评价') }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								账户状态
							</u-td>
							<u-td class="u-table-td"  >
								<text :class="!data.status.value?'uni-color-success':'uni-color-error'">
									{{  data.status.text  }}
								</text>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								是否确认条款
							</u-td>
							<u-td class="u-table-td"  >
								<text :class="data.is_confirm_term?'uni-color-success':'uni-color-error'">
									{{  data.is_confirm_term ?'已确认':'未确认'  }}
								</text>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								身份
							</u-td>
							<u-td class="u-table-td"  >
								{{  data.is_technician ?'技师':'用户'  }}
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								创建时间
							</u-td>
							<u-td class="u-table-td"  >
								{{  data.create_date?data.create_date.date :''  }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								审核状态
							</u-td>
							<u-td class="u-table-td"  >
								<text :style="`color:${examStatusColor(data.examine_status.value)}`" >
									{{(data.examine_status.text) }}
								</text>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								资料填写进度
							</u-td>
							<u-td class="u-table-td"  >
								<text :style="`color:${data.step != 3?'#ef5352':'#4cd964' }`" >
									{{onStepValue(data.step )  }}
								</text>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								审核时间
							</u-td>
							<u-td class="u-table-td"  >
									<uni-dateformat :date="data.examine_status.datetime"></uni-dateformat>
							</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="base">
					<u-table class="u-table-basic"  align="left" >
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								图片信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户头像
							</u-td>
							<u-td class="u-table-td"  >
								<view class="flex-layout">
									<u-image width="100px" height="100px" :src="data.head_image"
										@click="eventImage(data.head_image)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								身份证正面
							</u-td>
							<u-td class="u-table-td"  >
								<view class="flex-layout">
									<u-image width="150px" height="100px" :src="data.id_card.card_zheng"
										@click="eventImage(data.id_card.card_zheng)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								身份证反面
							</u-td>
							<u-td class="u-table-td"  >
								<view class="flex-layout">
									<u-image width="150px" height="100px" :src="data.id_card.card_fan"
										@click="eventImage(data.id_card.card_fan)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" v-if="data.photo" >
							<u-td class="u-table-td bold" width="104px" >
								技师照片
							</u-td>
							<u-td class="u-table-td"  >
								<view class="flex-layout" style="width:250px;">
									<u-swiper  height="400" @click="eventImage(data.photo)" :list="data.photo"></u-swiper>
								</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
			<view class="util-button">
				<view class="">
					<u-button type="primary" @click="this.showExamSuccess = true;" size="mini" :disabled="data.step != 3 || data.examine_status.value == 1" >
						审核通过
					</u-button>
				</view>
				<view class="">
					<u-button type="error" size="mini" @click="this.showExamError = true"  :disabled="data.examine_status.value == 1" >
						审核拒绝
					</u-button>
				</view>
				<view class="">
					<u-button type="info" size="mini" @click="onBack" >
						返回列表
					</u-button>
				</view>
			</view>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
	<u-modal v-model="showExamSuccess"  
		content="请确保该店铺每一项都正确无误，确定要通过审核吗？"
		title="审核通过"
		confirm-text='审核通过'
		cancel-text='关闭'
		@confirm="onExamSubmit"
		show-cancel-button
	></u-modal>
	<u-popup v-model="showExamError" mode="center" closeable border-radius="10">
		<view class="uni-popup-box">
			<view class="uni-global-title" >审核拒绝</view>
			<view class="">
				<textarea v-model="audit_text"
					style="width:calc(100% - 20px);height:188px;background:#f8f8f8;padding:10px;font-size:.9rem;"
					placeholder="请在此输入审核不通过原因" />
			</view>
			<view style="display: flex;gap:20px;margin-top:10px" >
				<view style="flex:1">
					<u-button type="primary" @click="onExamErrorSubmit" >
						确定
					</u-button>
				</view>
				<view style="flex:1">
					<u-button type="info" @click="this.showExamError = false ;" >
						关闭
					</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {onStepValue ,examStatusColor} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	const collctionName = "userinfo" ;
	export default {
		data() {
			return {
				loading:true,
				showExamSuccess:false,// 审核通过弹框
				showExamError:false, // 审核拒绝弹框
				audit_text:'审核拒绝',
				uid:'',
				data:{}
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				let field = " head_image,name,sex,mobile,birthday,sell,orders,intro,coordinate,photo,step,id_card,shop,create_date,classify,location,order_taking,is_technician,is_confirm_term,money,coordinate,examine_status,status ";
				global.getOne(collctionName,{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.data.examine_status = data.examine_status?data.examine_status:{"text": '未审核',"value": 0,"datetime": Date.now()};
					this.data.status = data.status?data.status:{"value": 0,"text": '正常'};
					this.data.order_taking = data.order_taking?data.order_taking:{"value": 0,"time":''};
					this.data.classify = data.classify ?data.classify :[]; 
					this.data.coordinate = data.coordinate?data.coordinate.coordinates?data.coordinate.coordinates.join(','):'':'';
					this.loading = false ;
				})
			},
			// 审核通过
			onExamSubmit(){
				this.loading = true;
				const data = this.data;
				const where = {
					examine_status:{ text:'审核通过',value:1,datetime:Date.now() },
					is_confirm_term:1,
				};
				global.updateData(collctionName,where,{_id:data._id}).then( res => {
					if(res.affectedDocs == 1){
						this.$refs.uToast.show({
							title:'审核完成',type: 'success',duration:500,position:'top',
							callback:()=>{
								this.loading = false;
								uni.navigateTo({url:'./examine'}) ;
							}
						})
					}else {
						this.loading = false;
						this.$refs.uToast.show({title:"网络错误请重试",type: 'error',duration:2000,position:'top' })
					}
				})
			},
			// 审核拒绝
			onExamErrorSubmit(){
				const where = {
					examine_status:{ text:this.audit_text,value:2,datetime:Date.now() },
				};
				global.updateData(collctionName,where,{ _id:this.data._id}).then( res => {
					if(res.affectedDocs == 1){
						this.$refs.uToast.show({
							title:'审核拒绝',type: 'success',duration:500,position:'top',
							callback:()=>{
								this.loading = false;
								uni.navigateTo({url:'./examine'}) ;
							}
						})
					}else {
						this.loading = false;
						this.$refs.uToast.show({title:"网络错误请重试",type: 'error',duration:2000,position:'top' })
					}
				})
			},
			initIdCard(idCard){
				return Util.formatBankCardNumber(`${idCard}`);
			},
			initBirthdy(birthdy){
				if( !birthdy ) return '' ;
				const firstFour = birthdy.substring(0, 4); // 截取前四位
				const remaining = birthdy.substring(4); // 截取剩余部分
				// 每两位添加空格
				const formatted = remaining.replace(/(.{2})/g, '-\$1 ').trim();
				return `${firstFour} ${formatted}`;
			},
			// 根据步骤值返回相应的提示信息
			onStepValue(step){
				return onStepValue(step);
			},
			//审核状态颜色返回
			examStatusColor(status){
				return examStatusColor(status);
			},
			onBack(){
				return	uni.navigateBack(1)
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style>
	.util-button{
		padding:20px;
		display: flex;
		gap:20px;
		justify-content: center;
	}
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
	}
	.base{
		width: 50%;
	}
</style>
